import { useState } from 'react';
import { Pressable, Text, View } from 'react-native';
import {
  Clickable,
  GestureHandlerRootView,
} from 'react-native-gesture-handler';

export default function App() {
  const [children, setChildren] = useState<React.ReactNode[]>([]);

  return (
    <GestureHandlerRootView
      style={[
        { flex: 1, alignItems: 'center', justifyContent: 'center' },
        { marginTop: 25 },
      ]}>
      <Clickable>
        <Text>Clickable</Text>

        {children.map((child, index) => (
          <View key={index}>{child}</View>
        ))}
      </Clickable>

      <Pressable
        onPress={() =>
          setChildren([
            ...children,
            <Text key={children.length}>New child</Text>,
          ])
        }>
        <Text>Add child to Clickable</Text>
      </Pressable>

      <Pressable onPress={() => setChildren(children.slice(0, -1))}>
        <Text>Remove child from Clickable</Text>
      </Pressable>
    </GestureHandlerRootView>
  );
}